<template>
  <div>
    <div class="content-item">
      <p>评比名称：{{richText.name}}</p>
      <p>评比类型：{{richText.type}}</p>
      <p>评比时间：{{richText.time}}</p>
      <p>开展校区：{{schoolAreaName.join('、')}}</p>
      <p><strong>评比介绍：</strong></p>
      <div v-html="richText.content" class="richtable"></div>
    </div>
  </div>
</template>
<script>
import { listSchoolAreaUsingGET } from '@api/auto'
export default {
  name: '',
  props: {
  },
  mixins: [],
  components: {},
  data () {
    return {
      schoolAreaName: [],
      richText: {}
    }
  },
  created () {
    this.richText = JSON.parse(sessionStorage.richText)
    let schoolAreas = []
    listSchoolAreaUsingGET().then(res => {
      schoolAreas = res.data
      this.schoolAreaName = this.richText.schoolAreas.map(item => {
        let res = schoolAreas.find(ele => {
          return ele.id === item
        })
        return res.name
      })
    })
  },
  mounted () { },
  methods: {
  }
}
</script>
<style lang='less'>
.richtable {
  /* table 样式 */
  table {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
  }
  table td,
  table th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 3px 5px;
  }
  table th {
    border-bottom: 2px solid #ccc;
    text-align: center;
  }

  /* blockquote 样式 */
  blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
  }

  /* code 样式 */
  code {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background-color: #f1f1f1;
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0 3px;
  }
  pre code {
    display: block;
  }

  /* ul ol 样式 */
  ul, ol {
    margin: 10px 0 10px 20px;
  }
}
</style>
